<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>单一按钮显示/隐藏</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            font: 12px/1.5 Tahoma;
        }

        .outer {
            width: 200px;
            border: 1px solid #aaa;
            margin: 10px auto;

        }

        .outer h2 {
            padding: 2px 5px;
            color: #57646e;
            font-size: 14px;
            font-weight: 400;
            cursor: pointer;
            background: #ced3d7 url(img/ico.gif) no-repeat 180px 15px;
            height: 30px;
            line-height: 30px;
        }

        .outer h2.open{
            background-position: 180px -12px;
        }

        ul {
            border-top: 1px solid #DEE3E6;
            list-style: none;
            /* display: none; */
        }

        ul li {
            height: 25px;
            line-height: 25px;
            vertical-align: top;
        }

        li a {
            height: 25px;
            text-decoration: none;
            color: #6b7980;
            background: #e9edf2;
            display: block;
            padding: 0 10px;
        }
        .outer a:hover {background:#fff;text-decoration:underline;}
    </style>
    <script>
        window.onload = function () {
            var oH2 = document.getElementsByTagName("h2")[0];
            var oUl = document.getElementsByTagName("ul")[0];
            oH2.onclick = function () {
                var style = oUl.style;
                style.display = style.display == "none" ? "block" : "none";
                oH2.className = style.display == "none" ? "open" : "";
            }
        }
    </script>
</head>

<body>
    <div class="outer">
        <h2 class="">播放列表...</h2>
        <ul>
            <li><a href="javascript:;">玩家之徒 - 蔡依林</a></li>
            <li><a href="javascript:;">原谅我就是这样的女生 - 戴佩妮</a></li>
            <li><a href="javascript:;">猜不透 - 丁当</a></li>
            <li><a href="javascript:;">自导自演 - 周杰伦</a></li>
            <li><a href="javascript:;">浪漫窝 - 弦子</a></li>
            <li><a href="javascript:;">流年 - 王菲</a></li>
        </ul>
    </div>
</body>

</html>